<template>
  <div>
    <div class="cont" v-show="contShow">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="tabClick"
        @tab-change="tabChange"><!-- :before-leave="beforeLeave" -->
        <el-tab-pane label="特色景点" name="first">
          <!-- 搜索工作栏 -->
          <el-form ref="queryFormRef" :inline="true" :model="queryParams" class="cont_top" label-width="50px">
            <el-form-item style="margin-right: 12px">
              <el-button link type="primary" @click="alldelbtn" class="btnhover" style="
                  width: 90px;
                  height: 30px;
                  background-color: #FF9900;
                  color: rgba(255, 255, 255, 1);
                ">批量删除</el-button>
            </el-form-item>
            <el-form-item label="景点名称" prop="name" style="margin-right: 17px" label-width="76px">
              <el-input v-model="queryParams.name" placeholder="" @keyup.enter="handleQuery" style="width: 170px" />
            </el-form-item>
            <el-form-item label="审核状态" prop="status" style="margin-right: 17px" label-width="74px">
              <el-select v-model="queryParams.status" @change="handleQuery" placeholder="" placement="bottom"
                style="width: 140px">
                <el-option v-for="item in optionstate" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item style="margin-right: 0">
              <el-button @click="handleQuery" class="btn btnsearch">查询</el-button>
              <el-button @click="resetQuery" class="btn btnreset">重置</el-button>
            </el-form-item>
          </el-form>
          <!-- 列表 -->
          <el-table v-loading="loading" element-loading-text="Loading..." :data="scenicspotList"
            style="margin-bottom: 20px;min-height: 435px;" :header-cell-style="{ background: '#F0F0F0' }"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50" />
            <el-table-column align="center" label="景点名称" show-overflow-tooltip min-width="220">
              <template #default="scope">
                <div class="namecont">
                  {{ scope.row.scenicName }}
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="封面图片" prop="fileDOList" min-width="120">
              <template #default="scope">
                <UploadImg v-if="scope.row.fileDOList.length != 0" disabled style="pointer-events: none;"
                  v-model="scope.row.fileDOList[0].url" height="60px" width="60px" :limit="1" />
                <div v-else style="width:60px;height:60px;line-height:60px;">暂无图片</div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="景点标签" prop="scenicLabel" width="300" show-overflow-tooltip>
              <template #default="scope">
                <div v-if="scope.row.scenicLabel.join() !== ''"
                  :style="scope.row.scenicLabel.length >= 3 ? 'display: flex;justify-content:left;' : 'display: flex;justify-content:center'">
                  <div class="label_style">
                    <div v-for="(item, index) in scope.row.scenicLabel" class="identity_style" :key="index">
                      {{ item }}
                    </div>
                  </div>
                </div>
                <div v-else style="display: flex;justify-content:center;">
                  --
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="地址" prop="scenicAddr" show-overflow-tooltip min-width="220">
              <template #default="scope">
                <div class="namecont">
                  {{ scope.row.scenicAddr }}
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="审核状态" prop="status" min-width="120">
              <template #default="scope">
                <div :style="stateText(scope.row.status)" class="state_style">{{
                  stateTypeObj[scope.row.status] }}
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="提交人" prop="creator" min-width="200" />
            <el-table-column :formatter="dateFormatter" align="center" label="提交时间" prop="createTime" min-width="200" />
            <el-table-column align="center" label="操作" fixed="right" width="160">
              <template #default="scope">
                <el-button link type="primary" class="btnhover" @click="detailsbtn(scope.row)"
                  style="color: #3c88f0">详情</el-button>
                <el-button link type="primary" class="btnhover" @click="delbtn(scope.row)"
                  style="color: #3c88f0">删除</el-button>
                <el-button v-if="scope.row.status === '审核中'" v-hasPermi="['countryside:touristcenter:shenhe']" link
                  type="primary" class="btnhover" @click="statebtn(scope.row)" style="color: #3c88f0">审核</el-button>
                <div v-else style="width: 42px" v-hasPermi="['countryside:touristcenter:shenhe']"></div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="口碑美食" name="second">
          <!-- 搜索工作栏 -->
          <el-form ref="queryFormRefF" :inline="true" :model="queryParamsF" class="cont_top" label-width="50px">
            <el-form-item style="margin-right: 12px">
              <el-button link type="primary" @click="alldelbtn" class="btnhover" style="
                  width: 90px;
                  height: 30px;
                  background-color: #FF9900;
                  color: rgba(255, 255, 255, 1);
                ">批量删除</el-button>
            </el-form-item>
            <el-form-item label="店名" prop="name" style="margin-right: 17px">
              <el-input v-model="queryParamsF.name" placeholder="" @keyup.enter="handleQuery" style="width: 170px" />
            </el-form-item>
            <el-form-item label="审核状态" prop="status" style="margin-right: 17px" label-width="74px">
              <el-select v-model="queryParamsF.status" @change="handleQuery" placeholder="" placement="bottom"
                style="width: 140px">
                <el-option v-for="item in optionstate" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item style="margin-right: 0">
              <el-button @click="handleQuery" class="btn btnsearch">查询</el-button>
              <el-button @click="resetQuery" class="btn btnreset">重置</el-button>
            </el-form-item>
          </el-form>
          <!-- 列表 -->
          <el-table v-loading="loading" element-loading-text="Loading..." :data="foodList"
            style="margin-bottom: 20px;min-height: 435px;" :header-cell-style="{ background: '#F0F0F0' }"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50" />
            <el-table-column align="center" label="店名" show-overflow-tooltip min-width="220">
              <template #default="scope">
                <div class="namecont">
                  {{ scope.row.storeName }}
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="宣传照片" prop="fileDOList" min-width="120">
              <template #default="scope">
                <UploadImg v-if="scope.row.fileDOList.length != 0" disabled style="pointer-events: none;"
                  v-model="scope.row.fileDOList[0].url" height="60px" width="60px" :limit="1" />
                <div v-else style="width:60px;height:60px;line-height:60px;">暂无图片</div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="商家标签" prop="storeLabel" width="300" show-overflow-tooltip>
              <template #default="scope">
                <div v-if="scope.row.storeLabel.join() !== ''"
                  :style="scope.row.storeLabel.length >= 3 ? 'display: flex;justify-content:left;' : 'display: flex;justify-content:center'">
                  <div class="label_style">
                    <div v-for="(item, index) in scope.row.storeLabel" class="identity_style" :key="index">
                      {{ item }}
                    </div>
                  </div>
                </div>
                <div v-else style="display: flex;justify-content:center;">
                  --
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="地址" prop="storeAddr" show-overflow-tooltip min-width="220">
              <template #default="scope">
                <div class="namecont">
                  {{ scope.row.storeAddr }}
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="审核状态" prop="status" min-width="120">
              <template #default="scope">
                <div :style="stateText(scope.row.status)" class="state_style">{{
                  stateTypeObj[scope.row.status] }}
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="提交人" prop="creator" min-width="200" />
            <el-table-column :formatter="dateFormatter" align="center" label="提交时间" prop="createTime" min-width="200" />
            <el-table-column align="center" label="操作" fixed="right" width="160">
              <template #default="scope">
                <el-button link type="primary" class="btnhover" @click="detailsbtnF(scope.row)"
                  style="color: #3c88f0">详情</el-button>
                <el-button link type="primary" class="btnhover" @click="delbtn(scope.row)"
                  style="color: #3c88f0">删除</el-button>
                <el-button v-if="scope.row.status === '审核中'" v-hasPermi="['countryside:touristcenter:shenhe']" link
                  type="primary" class="btnhover" @click="statebtn(scope.row)" style="color: #3c88f0">审核</el-button>
                <div v-else style="width: 42px" v-hasPermi="['countryside:touristcenter:shenhe']"></div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="特色民宿" name="third">
          <!-- 搜索工作栏 -->
          <el-form ref="queryFormRefH" :inline="true" :model="queryParamsH" class="cont_top" label-width="50px">
            <el-form-item style="margin-right: 12px">
              <el-button link type="primary" @click="alldelbtn" class="btnhover" style="
                  width: 90px;
                  height: 30px;
                  background-color: #FF9900;
                  color: rgba(255, 255, 255, 1);
                ">批量删除</el-button>
            </el-form-item>
            <el-form-item label="店名" prop="name" style="margin-right: 17px">
              <el-input v-model="queryParamsH.name" placeholder="" @keyup.enter="handleQuery" style="width: 170px" />
            </el-form-item>
            <el-form-item label="审核状态" prop="status" style="margin-right: 17px" label-width="74px">
              <el-select v-model="queryParamsH.status" @change="handleQuery" placeholder="" placement="bottom"
                style="width: 140px">
                <el-option v-for="item in optionstate" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item style="margin-right: 0">
              <el-button @click="handleQuery" class="btn btnsearch">查询</el-button>
              <el-button @click="resetQuery" class="btn btnreset">重置</el-button>
            </el-form-item>
          </el-form>
          <!-- 列表 -->
          <el-table v-loading="loading" element-loading-text="Loading..." :data="homestayList"
            style="margin-bottom: 20px;min-height: 435px;" :header-cell-style="{ background: '#F0F0F0' }"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50" />
            <el-table-column align="center" label="店名" show-overflow-tooltip min-width="220">
              <template #default="scope">
                <div class="namecont">
                  {{ scope.row.homestayName }}
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="民宿照片" prop="fileDOList" min-width="120">
              <template #default="scope">
                <UploadImg v-if="scope.row.fileDOList.length != 0" disabled style="pointer-events: none;"
                  v-model="scope.row.fileDOList[0].url" height="60px" width="60px" :limit="1" />
                <div v-else style="width:60px;height:60px;line-height:60px;">暂无图片</div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="民宿标签" prop="homestayLabel" width="300" show-overflow-tooltip>
              <template #default="scope">
                <div v-if="scope.row.homestayLabel.join() !== ''"
                  :style="scope.row.homestayLabel.length >= 3 ? 'display: flex;justify-content:left;' : 'display: flex;justify-content:center'">
                  <div class="label_style">
                    <div v-for="(item, index) in scope.row.homestayLabel" class="identity_style" :key="index">
                      {{ item }}
                    </div>
                  </div>
                </div>
                <div v-else style="display: flex;justify-content:center;">
                  --
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="地址" prop="homestayAddr" show-overflow-tooltip min-width="220">
              <template #default="scope">
                <div class="namecont">
                  {{ scope.row.homestayAddr }}
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="审核状态" prop="status" min-width="120">
              <template #default="scope">
                <div :style="stateText(scope.row.status)" class="state_style">{{
                  stateTypeObj[scope.row.status] }}
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="提交人" prop="creator" min-width="200" show-overflow-tooltip>
              <template #default="scope">
                <div class="namecont">
                  {{ scope.row.creator }}
                </div>
              </template>
            </el-table-column>
            <el-table-column :formatter="dateFormatter" align="center" label="提交时间" prop="createTime" min-width="200" />
            <el-table-column align="center" label="操作" fixed="right" width="160">
              <template #default="scope">
                <el-button link type="primary" class="btnhover" @click="detailsbtnH(scope.row)"
                  style="color: #3c88f0">详情</el-button>
                <el-button link type="primary" class="btnhover" @click="delbtn(scope.row)"
                  style="color: #3c88f0">删除</el-button>
                <el-button v-if="scope.row.status === '审核中'" v-hasPermi="['countryside:touristcenter:shenhe']" link
                  type="primary" class="btnhover" @click="statebtn(scope.row)" style="color: #3c88f0">审核</el-button>
                <div v-else style="width: 42px" v-hasPermi="['countryside:touristcenter:shenhe']"></div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <!-- 分页 -->
      <el-pagination style="font-size: 14px;" v-model:current-page="pageNo" :hide-on-single-page="value"
        v-model:page-size="pageSize" :page-sizes="pageSizes" layout="total,sizes,prev, pager, next,jumper"
        :total="total" @size-change="selectchange" @current-change="handleCurrentChange" />
    </div>
    <ScenicspotDialog v-show="scenicspotShow" :scenicspotShow="scenicspotShow" @getscenicspot-show="getscenicspotShow"
      :editData="editData" @getedit-data="geteditData" />
    <FoodDialog v-show="foodShow" :foodShow="foodShow" @getfood-show="getfoodShow" :editData="editData"
      @getedit-data="geteditData" />
    <HomestayDialog v-show="homestayShow" :homestayShow="homestayShow" @gethomestay-show="gethomestayShow"
      :editData="editData" @getedit-data="geteditData" />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { dateFormatter } from '@/utils/formatTime'
import ScenicspotDialog from './components/scenicspotDialog.vue'
import FoodDialog from './components/foodDialog.vue'
import HomestayDialog from './components/homestayDialog.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import * as getTouristcenterApi from '@/api/appManagement/touristcenterManagement/index'
import { ifError } from 'assert'
const { push } = useRouter() // 路由
const route = useRoute()
const selectList = ref([]) // 表格选中数据
const loading = ref(true) // 列表加载中
const total = ref(0) // 列表的总页数
const scenicspotList = ref([]) // 景点列表数据
const foodList = ref([]) // 美食列表数据
const homestayList = ref([]) // 民宿列表数据
const value = ref(true)
const typeStr = ref('景点')
const pageSizes = [10, 20, 50, 100]
const pageNo = ref(1) // 列表当前页码
const pageSize = ref(10) // 每页数量
const stateTypeObj = {
  '审核中': '待审核',
  '已发布': '审核通过',
  '审核驳回': '审核驳回'
}
const optionstate = [
  {
    value: 1,
    label: '待审核'
  },
  {
    value: 2,
    label: '审核通过'
  },
  {
    value: 3,
    label: '审核驳回'
  }
]
const optionstate1 = [
  {
    value: 1,
    label: '审核中'
  },
  {
    value: 2,
    label: '已发布'
  },
  {
    value: 3,
    label: '审核驳回'
  }
]
let activeName = ref('first')
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  name: '',
  status: '',
  origin: '',
})
const queryParamsF = reactive({
  pageNo: 1,
  pageSize: 10,
  name: '',
  status: '',
  origin: '',
})
const queryParamsH = reactive({
  pageNo: 1,
  pageSize: 10,
  name: '',
  status: '',
  origin: '',
})
const queryFormRef = ref() // 搜索的表单
const queryFormRefF = ref() // 搜索的表单
const queryFormRefH = ref() // 搜索的表单
const scenicspotShow = ref(false)
const foodShow = ref(false)
const homestayShow = ref(false)
const contShow = ref(true)
const editData = ref({})
const getscenicspotShow = (val) => {
  scenicspotShow.value = val
  contShow.value = !val
}
const getfoodShow = (val) => {
  foodShow.value = val
  contShow.value = !val
}
const gethomestayShow = (val) => {
  homestayShow.value = val
  contShow.value = !val
}
const geteditData = (val) => {
  handleCurrentChange(val)
}

/** 条数变化 */
const selectchange = (e) => {
  pageSize.value = e
  switch (activeName.value) {
    case 'first':
      queryParams.pageSize = e
      queryParams.pageNo = 1
      break;
    case 'second':
      queryParamsF.pageSize = e
      queryParamsF.pageNo = 1
      break;
    case 'third':
      queryParamsH.pageNo = 1
      queryParamsH.pageSize = e
      break;
  }
  getList()
}
/** 页码变化 */
const handleCurrentChange = (e) => {
  pageNo.value = e
  switch (activeName.value) {
    case 'first':
      queryParams.pageNo = e
      break;
    case 'second':
      queryParamsF.pageNo = e
      break;
    case 'third':
      queryParamsH.pageNo = e
      break;
  }
  getList()
}

/** 状态背景色 */
const stateText = (item: any) => {
  const colors = ['rgba(247,165,67,0.4)', 'rgba(29,224,159,0.3)', 'rgba(234,44,16,0.3)']
  const colors2 = ['rgba(234,112,16,1)', 'rgba(57,144,115,1)', 'rgba(221,68,22,1)']
  let colorIndex = 0
  switch (item) {
    case optionstate1[0].label:
      colorIndex = 0
      break
    case optionstate1[1].label:
      colorIndex = 1
      break
    case optionstate1[2].label:
      colorIndex = 2
      break
  }
  return {
    backgroundColor: colors[colorIndex],
    color: colors2[colorIndex]
  }
}

/** 查询任务列表 */
const getList = async () => {
  switch (activeName.value) {
    case 'first':
      getTouristcenterApi.getScenicspotPage(queryParams)
        .then((res) => {
          let data = reactive(res.list)
          data.forEach((item) => {
            item.scenicLabel = item.scenicLabel.split(',')
            item.fileDOList = item.fileDOList.reverse()
          })
          scenicspotList.value = data
          total.value = res.total
          if (scenicspotList.value.length === 0) {
            value.value = true
          } else {
            value.value = false
          }
          loading.value = false
        })
        .catch((error) => {
          loading.value = false
        })
      break;
    case 'second':
      getTouristcenterApi.getFoodPage(queryParamsF)
        .then((res) => {
          let data = reactive(res.list)
          data.forEach((item) => {
            item.storeLabel = item.storeLabel.split(',')
            item.fileDOList = item.fileDOList.reverse()
          })
          foodList.value = data
          total.value = res.total
          if (foodList.value.length === 0) {
            value.value = true
          } else {
            value.value = false
          }
          loading.value = false
        })
        .catch((error) => {
          loading.value = false
        })
      break;
    case 'third':
      getTouristcenterApi.getHomestayPage(queryParamsH)
        .then((res) => {
          let data = reactive(res.list)
          data.forEach((item) => {
            item.homestayLabel = item.homestayLabel.split(',')
            item.fileDOList = item.fileDOList.reverse()
          })
          homestayList.value = data
          total.value = res.total
          if (homestayList.value.length === 0) {
            value.value = true
          } else {
            value.value = false
          }
          loading.value = false
        })
        .catch((error) => {
          loading.value = false
        })
      break;
  }
}

/** 审核 */
const statebtn = async (row: any) => {
  editData.value = row
  editData.value.typeStr = nametypeMap[activeName.value]
  switch (activeName.value) {
    case 'first':
      scenicspotShow.value = true
      editData.value.pageNo = queryParams.pageNo
      break;
    case 'second':
      foodShow.value = true
      editData.value.pageNo = queryParamsF.pageNo

      break;
    case 'third':
      homestayShow.value = true
      editData.value.pageNo = queryParamsH.pageNo

      break;
  }
  contShow.value = false
}
/** 景点详情 */
const detailsbtn = (row: any) => {
  push({
    name: 'scenicspotDetails',
    query: {
      id: row.id
    }
  })
}
/** 美食详情 */
const detailsbtnF = (row: any) => {
  push({
    name: 'foodDetails',
    query: {
      id: row.id
    }
  })
}
/** 民宿详情 */
const detailsbtnH = (row: any) => {
  push({
    name: 'homestayDetails',
    query: {
      id: row.id
    }
  })
}

//名称映射
const nametypeMap = {
  first: '景点',
  second: '美食',
  third: '民宿'
};
//名称字段映射
const typeMap = {
  first: 'scenicName',
  second: 'storeName',
  third: 'homestayName'
};
/** 批量删除 */
const handleSelectionChange = (e) => {
  selectList.value = e
}
const alldelbtn = () => {
  if (selectList.value.length == 0) {
    ElMessage({
      message: '至少选中一条数据！',
      type: 'warning'
    })
    return
  }
  ElMessageBox.confirm(`此操作将永久删除选中${nametypeMap[activeName.value]}, 是否继续?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      const idList = selectList.value.map(item => item.id);
      const params = {
        ids: idList.join(','),
        typeStr: nametypeMap[activeName.value]
      }
      try {
        await getTouristcenterApi.deleteVisitorList(params);
        ElMessage.success('删除成功');
        selectList.value = []
        await getList(); // 刷新列表  
      } catch (error) {
        ElMessage.error('删除失败');
      }
    })
    .catch(() => {
      ElMessage.info('已取消删除')
    })
}
/** 删除 */
const delbtn = (row: any) => {
  const attributeName = typeMap[activeName.value]
  // 检查attributeName和row上对应的属性是否存在  
  if (!attributeName) {
    ElMessage.error('无法找到相应的类型或数据')
    return
  }
  const valueToDisplay = row[attributeName]
  ElMessageBox.confirm(`此操作将永久删除选中${nametypeMap[activeName.value]}${valueToDisplay}, 是否继续?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      const params = {
        ids: row.id,
        typeStr: nametypeMap[activeName.value]
      }
      try {
        await getTouristcenterApi.deleteVisitorList(params);
        ElMessage.success('删除成功');
        await getList(); // 刷新列表  
      } catch (error) {
        ElMessage.error('删除失败');
      }
    })
    .catch(() => {
      ElMessage.info('已取消删除')
    })
}

/** 查询按钮操作 */
const handleQuery = () => {
  switch (activeName.value) {
    case 'first':
      queryParams.pageNo = 1
      break;
    case 'second':
      queryParamsF.pageNo = 1
      break;
    case 'third':
      queryParamsH.pageNo = 1
      break;
  }
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  switch (activeName.value) {
    case 'first':
      queryFormRef.value.resetFields()
      break;
    case 'second':
      queryFormRefF.value.resetFields()
      break;
    case 'third':
      queryFormRefH.value.resetFields()
      break;
  }
  handleQuery()
}

/** tab选项卡点击 */
const tabClick = (tab) => {
  localStorage.setItem('tabactiveName', JSON.stringify(tab.props.name))
  activeName.value = tab.props.name
  // getList()
}

/** tab选项卡切换 */
const tabChange = (tab) => {
  switch (activeName.value) {
    case 'first':
      queryParams.pageSize = pageSize.value
      queryParams.pageNo = pageNo.value
      scenicspotList.value = []
      break;
    case 'second':
      queryParamsF.pageSize = pageSize.value
      queryParamsF.pageNo = pageNo.value
      foodList.value = []
      break;
    case 'third':
      queryParamsH.pageSize = pageSize.value
      queryParamsH.pageNo = pageNo.value
      homestayList.value = []
      break;
  }
  getList()
}

function tryParseJSON(str) {
  try {
    return JSON.parse(str)
  } catch (error) {
    return null
  }
}

// const beforeLeave = async (tab) => {
//     if (selectList.value.length != 0) {
//     ElMessage({
//       message: '当前表格还有选中数据，请取消后切换菜单。',
//       type: 'info'
//     })
//     return false
//   }
// }

/** 初始化 **/
onMounted(() => {
  const storedActiveName = localStorage.getItem('tabactiveName')
  activeName.value = storedActiveName ? (
    tryParseJSON(storedActiveName) || 'first'
  ) : 'first'
  getList()
})
onUpdated(() => {
})
</script>

<style scoped>
.cont {
  background-color: rgba(255, 255, 255, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: center;
  min-height: 557px;
  position: relative;
}

.cont_top {
  text-align: left;
  margin: 4px 0;
}

::v-deep .el-table .cell {
  display: flex;
  justify-content: center;
}

::v-deep .el-input__wrapper.is-focus {
  box-shadow: 0 0 0 1px #cc352f;
}

::v-deep .el-select__wrapper.is-focused {
  box-shadow: 0 0 0 1px #cc352f;
}

.btn {
  width: 80px;
  height: 30px;
  line-height: 20px;
  border-radius: 5px;
  font-size: 14px;
  text-align: center;
}

.btnreset {
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(187, 187, 187, 1);
  color: rgba(142, 142, 142, 1);
}

.btnsearch {
  background-color: #cc352f;
  color: rgba(255, 255, 255, 1);
  border: 1px solid #cc352f;
}

.btn:hover {
  opacity: 0.8;
}

.btnhover:hover {
  opacity: 0.8;
}

.el-pagination {
  justify-content: center;
}

.namecont {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.identity_style {
  min-width: 87px;
  height: 22px;
  line-height: 20px;
  text-align: center;
  border-radius: 4px;
  padding: 0 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 2px;
  font-size: 12px;
  border: none;
  cursor: pointer;
  user-select: none;
  border: 1px solid #CB1212;
  color: #D30E0E;
}

.identity_style:hover {
  opacity: 0.8;
}

.state_style {
  width: 70px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border-radius: 25px;
  padding: 0 5px;
  font-size: 12px;
  border: none;
  cursor: pointer;
  user-select: none;
}

.state_style:hover {
  opacity: 0.8;
}

::v-deep .el-form-item__label {
  padding: 0 17px 0 0;
}

.upload-demo {
  height: 50px;
}

::v-deep.el-upload-list__item .el-upload-list__item-info {
  width: calc(100% - 0px);
}

::v-deep .el-upload-list .el-upload-list--text {
  position: absolute !important;
  top: 25px;
}

.label_style {
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
  padding: 9px 0 6px 0;
}

::v-deep .el-table .cell.el-tooltip {
  display: block;
}

::v-deep .label_style::-webkit-scrollbar {
  height: 3px;
}

::v-deep .label_style:hover::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}

::v-deep .label_style::-webkit-scrollbar-thumb {
  border-radius: 20px;
  background: transparent;
}

::v-deep .label_style::-webkit-scrollbar-track {
  display: none;
}

::v-deep .el-tabs__nav-wrap::after {
  background-color: transparent;
}

::v-deep .el-tabs__item {
  height: 30px;
}

::v-deep .el-tabs__item.is-active,
::v-deep .el-tabs__item:hover {
  color: rgb(60, 136, 240);
}

::v-deep .el-tabs__active-bar {
  background-color: rgb(60, 136, 240);
}

::v-deep .upload .el-upload .el-upload-dragger {
  border: 1px solid var(--el-border-color-darker) !important;
}

::v-deep .upload-box .el-upload__tip {
  display: none !important;
}
</style>